﻿<!DOCTYPE html>
<html lang="en">

<head>
	<th:block th:include="include :: header('磁盘管理')" />
	<meta charset="utf-8">
</head>

<body>

            <div class="container-div">
				<div class="row">
					<div class="col-sm-12 select-table table-striped">
						<table id="bootstrap-table" data-page-size="10" 
							   data-show-custom-view="true" data-custom-view="customViewFormatter"
							   data-show-custom-view-button="true">
						</table>
					</div>
				</div>
			</div>
	
			<template id="profileTemplate">
				<div class="col-sm-4">
					<div class="contact-box">
						<a href="#">
							<div class="col-sm-4">
								<div class="text-center">
									<img alt="image" class="img-circle m-t-xs img-responsive" src="%IMAGE%">
									<div class="m-t-xs font-bold">磁盘ID：%diskId%</div>
								</div>
							</div>
							<div class="col-sm-8">
								<h3><strong>额定容量：%ratedVolume%</strong></h3>
								<h3><strong>已用容量：%usedVolume%</strong></h3>
								<h3><strong>磁盘类型：%diskType%</strong></h3>
								<h3><strong>读写次数: %readTimes%</strong></h3>
								<h3><strong>容量状态: %status%</strong></h3>
							</div>
							<div class="clearfix"></div>
						 </a>
					 </div>
				</div>
			</template>

	<th:block th:include="include :: footer" />
	
	<th:block th:include="include :: bootstrap-table-custom-view-js" />
	
  <script th:inline="javascript">
        //var prefix = ctx + "demo/table";
        //var datas = [[${@dict.getType('sys_normal_disable')}]];
		
		var data = {
			"total": 2,
			"rows": [
				{
					"diskId": 1,
					"ratedVolume": "64GB",
					"usedVolume": "32GB",
					"readTimes": 111,
					"diskType": 0,
					"status": 0
				},
				{
					"diskId": 2,
					"ratedVolume": "64GB",
					"usedVolume": "32GB",
					"readTimes": 117,
					"diskType": 1,
					"status": 1
				}
			],
			"code": 0,
			"msg": null
		}
		
        $(function() {
            var options = {
                //url: prefix + "/list",
				data:data,
		        showSearch: false,
		        showRefresh: false,
		        showToggle: false,
		        showColumns: false,
		        showExport: true,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'diskId', 
					title : '磁盘ID'
				},
				{
					field : 'ratedVolume', 
					title : '额定容量'
				},
				{
					field : 'usedVolume', 
					title : '使用容量'
				},
				{
					field : 'readTimes', 
					title : '读写次数'
				},
				{
					field : 'diskType', 
					title : '磁盘类型',
                    align: 'center',
                    formatter: function(value, row, index) {
                    	if(value == 0){
							return "<span class='badge badge-primary'>普通盘</span>";
						}else{
							return "<span class='badge badge-success'>阵列盘</span>";
						}
                    }
				},
				{
                    field: 'status',
                    title: '容量状态',
                    align: 'center',
                    formatter: function(value, row, index) {
                    	if(value == 0){
							return "<span class='badge badge-primary'>良好</span>";
						}else{
							return "<span class='badge badge-danger'>警告</span>";
						}
                    }
                },
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>挂载</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>卸载</a>');
						return actions.join('');
		            }
		        }]
            };
            $.table.init(options);
        });
        
        function customViewFormatter (data) {
            var template = $('#profileTemplate').html()
            var view = ''
            $.each(data, function (i, row) {
			
			  var volumeStatus = "";
			  var diskType = "";
			  
			  if(row.diskType == 0){
				diskType = "<span class='badge badge-primary'>普通盘</span>";
			}else{
				diskType = "<span class='badge badge-success'>阵列盘</span>";
			}
			
			if(row.status == 0){
				volumeStatus = "<span class='badge badge-primary'>良好</span>";
			}else{
				volumeStatus = "<span class='badge badge-danger'>警告</span>";
			}
			
              view += template.replace('%diskId%', row.diskId)
                .replace('%IMAGE%', "/img/data1.png")
                .replace('%ratedVolume%', row.ratedVolume)
                .replace('%usedVolume%', row.usedVolume)
                .replace('%readTimes%', row.readTimes)
                .replace('%diskType%', diskType)
				.replace('%status%', volumeStatus);
            })

            return `<div class="row mx-0">${view}</div>`
          }
    </script>
	

	
</body>

</html>